<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>系统角色_新增</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="<?php echo STATIC_ADMIN; ?>bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">

    <link rel="stylesheet" href="<?php echo STATIC_ADMIN; ?>dist/css/AdminLTE.css">
    <link rel="stylesheet" href="<?php echo STATIC_ADMIN; ?>dist/css/skins/_all-skins.css">

    <link rel="stylesheet" href="<?php echo STATIC_ADMIN; ?>dist/css/yc_style.css">
    <style>
        /*.checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline {margin-left: 0;}*/
        /*.checkbox-inline {width: 50%;}*/
        .well > hr:last-child{display: none;}
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition skin-blue">
<!-- Site wrapper -->
<div class="wrapper">

  <!-- main -->
  <div class="content-wrapper" style="margin: 0;">

      <!-- page title -->
    <section class="content-header">
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-gear"></i> 系统管理</a></li>
        <li><a href="#">系统角色</a></li>
        <li class="active">新增</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="alert alert-dismissible" role="alert" style="display: none;">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>提示：</strong><span id="msg">消息</span>
        </div>

      <!-- Default box -->
      <div class="box box-info">
          <div class="box-header with-border">
              <h3 class="box-title">新增角色</h3>
          </div>

          <form class="form-horizontal" id="acl_add" name="acl_add" method="post" action="<?php echo site_url('system/Role/save');?>">
              <div class="box-body">
                  <div class="form-group">
                      <label for="menu_name" class="col-sm-1 control-label">角色名称</label>
                      <div class="col-sm-4">
                          <input class="form-control" id="role_name" name="role_name" type="text"
                                 datatype="*1-16"
                                 nullmsg="角色名称不能为空"
                                 errormsg="角色名称最多允许16个字符"
                                 placeholder="角色名称">
                          <div class="Validform_checktip">角色名称最多允许输入16个字符</div>
                      </div>
                  </div>

                  <div class="form-group">
                      <label for="menu_parent" class="col-sm-1 control-label">角色描述</label>
                      <div class="col-sm-4">
                          <textarea class="form-control" id="role_remake" name="role_remake" rows="5"
                                    datatype="yes_null|*1-200"
                                    nullmsg="角色描述"
                                    errormsg="角色描述最多允许输入200个字符"
                                    placeholder="角色描述"></textarea>
                          <div class="Validform_checktip">角色描述最多允许输入200个字符</div>
                      </div>
                  </div>

                  <div class="form-group">
                      <label for="role_status" class="col-sm-1 control-label">状态</label>
                      <div class="col-sm-1">
                          <select class="form-control" id="role_status" name="role_status">
                              <option value="1">启用</option>
                              <option value="0">禁用</option>
                          </select>
                      </div>
                  </div>
                  
                  <div class="form-group">
                      <label class="col-sm-1 control-label">权限分配</label>
                      <div class="col-sm-8">
                          <!--<label class="checkbox-inline">
                              <input type="checkbox" id="inlineCheckbox2" value="option2"> 全选
                          </label>-->
                          <div class="well well-sm">
                              <?php
                              $i = 1;
                              foreach ($auth as $val) {
                                  $i++;
                              ?>
                              <div style="margin: 0;width: 100%;"><label class="checkbox-inline" style="font-size: 12px;font-weight: bold;"><input type="checkbox" id="group_<?php echo $val['menu_id'];?>" name="acl_group[]" onchange="allSelect_acl(this);"> <?php echo $val['menu_name'];?></label></div>
                              <div style="width: 100%;">
                                  <?php foreach ($val['acl'] as $acl_val) {?>
                                      <label class="checkbox-inline" style="font-size: 12px;/*min-width: 12%;*/">
                                          <input type="checkbox" id="role_<?php echo $acl_val['acl_id'];?>" name="role_acl[]" value="<?php echo $acl_val['acl_id'];?>" data-group="group_<?php echo $val['menu_id'];?>" onchange="select_acl('#group_<?php echo $val['menu_id'];?>');"> <?php echo $acl_val['acl_name'];?>
                                      </label>
                                  <?php }?>
                              </div>
                               <?php
                                  if ($i%1==0) echo '<hr style="border-top:dashed 1px #ccc;margin: 12px 0;">';
                              }
                              ?>
                          </div>
                      </div>
                  </div>
              </div>

              <div class="box-footer">
                  <a href="<?php echo site_url('system/Role/index');?>" class="btn btn-default" role="button">取消</a>
                  <button type="submit" class="btn btn-info pull-right">保存</button>
              </div>
          </form>
      </div>
      <!-- /.box -->

    </section>
    <!-- /.content -->
  </div>
  <!-- main end -->
</div>
<!-- ./wrapper -->

</body>
</html>
<!-- jQuery 2.2.3 -->
<script src="<?php echo STATIC_COMMON; ?>plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="<?php echo STATIC_ADMIN; ?>bootstrap/js/bootstrap.min.js"></script>
<!-- layer 3.0.3 -->
<script src="<?php echo STATIC_COMMON; ?>plugins/layer/layer.js"></script>

<!-- Validform 5.3.2 -->
<script src="<?php echo STATIC_COMMON; ?>plugins/Validform/Validform_v5.3.2.js"></script>

<!-- other -->
<script src="<?php echo STATIC_ADMIN; ?>dist/js/yc_app.js"></script>

<script>
    $(function() {
        ycApp.initValidator();
    });

    //全选反选当前分组权限
    function allSelect_acl(obj) {
        var _this = $(obj),
            _groupId = _this.attr('id');
        $('input[type=checkbox][name^=role_acl]').each(function () {
            if ($(this).attr('data-group')==_groupId) {
                if (_this.is(':checked')) {
                    $(this).prop('checked', true);
                } else {
                    $(this).prop('checked', false);
                }
            }
        });
    }

    //操作单个权限项目选中或者取消分组名称的checkbox
    function select_acl(obj) {
        var _groupId = $(obj).attr('id');
        //获取当前分组权限的数量
        var _currGroupAclNumber = $('input[type=checkbox][name^=role_acl][data-group='+_groupId+']').length;
        var _currGroupAclNumber_checked = $('input[type=checkbox][name^=role_acl][data-group='+_groupId+']:checked').length;

        //对比已选中与未选中的数量
        if (_currGroupAclNumber_checked==_currGroupAclNumber) {
            $(obj).prop('checked', true);
        } else if (_currGroupAclNumber_checked<_currGroupAclNumber) {
            $(obj).prop('checked', false);
        }
    }
</script>
